<template>
  <div ref="Map" class="GlobalMap"></div>
</template>

<script>
import worldJson from './world.json'
import nameMap from './nameMap';
import {chinaGeoCoordMap} from './chinaGeoCoordMap';
import getData from './getData';

export default {
  name: 'worldMap',
  props: {
    industry: {
      type: String,
      default: '食品'
    }
  },
  data() {
    return {
      hotDatas: [],
      mycontractMap: null
    };
  },
  mounted() {
    this.$echarts.registerMap('world', worldJson);
    this.$nextTick(async () => {
      this.initData();
      this.renderChart();
    })
    // setInterval(() => {
    //   this.hotDatas = getData()
    //   this.updateChart()
    // },3000)
    window.addEventListener('resize', function () {
      if (this.$refs) {
        this.mycontractMap.resize();
      }
    });
  },
  methods: {
    initData() {
      this.hotDatas = getData()
      this.mycontractMap = this.$echarts.init(this.$refs.Map);
    },
    generateLineSeries() {
      return {
        type: 'lines',
        coordinateSystem: 'geo',
        zlevel: 2,
        effect: {
          show: true,
          period: 3, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
          color: '#01ddff'
        },
        lineStyle: {
          normal: {
            show: true,
            width: 0.3, //尾迹线条宽度
            opacity: 0.1, //尾迹线条透明度
            curveness: 0.2, //尾迹线条曲直度
            color: 'red'
          },
          color: 'red'
        },
        data: this.hotDatas.map(e => {
          return [{
            coord: chinaGeoCoordMap[e.name],
            value: e.value,
            name: e.name
          }, {
            coord: chinaGeoCoordMap['中华人民共和国'],
            name: '中华人民共和国'
          }]
        })
      }
    },
    generateEffectScatterSeries() {
      return {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 1,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4, //波纹圆环最大限制，值越大波纹越大
          color: '#01ddff'
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            // offset: [-15,2], //偏移设置
            formatter: function (params) {//圆环显示文字
              // return params.data.name;
              return params.name
            },
            fontSize: 12,
            color: '#fff',
            opacity: 1
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function () {
          return 10; //圆环大小
        },
        itemStyle: {
          normal: {
            show: true,
            color: '#fff'
          }
        },
        data: this.hotDatas.map(e => {
          return {
            name: e.name,
            value: chinaGeoCoordMap[e.name] ? chinaGeoCoordMap[e.name].concat([e.value]) : []
          };
        })
      }
    },
    generateLightArea() {
      return {
        name: 'World',
        type: 'map',
        mapType: 'world',
        zoom: 1.2, //地图大小
        roam: false, //禁止拖拽
        itemStyle: {
          normal: {
            areaColor: '#0079c2', //地图默认颜色
            borderWidth: 0.5, //边框宽度
            textStyle: {
              color: '#fff' //默认文字颜色
            },
            borderColor: '#000' //地图边框颜色
          },
          emphasis: {
            areaColor: '#4306fe' //动态背景颜色
          }
        },
        select: {
          itemStyle: {
            areaColor: '#0079c2',
            textStyle: {
              color: '#fff'
            }
          }
        },
        label: {
          normal: {
            //静态的时候展示样式
            show: false, //是否显示地图名称
            textStyle: {
              color: '#000', //颜色
              fontSize: 14, //文字大小
              fontFamily: 'Arial'
            }
          },
          emphasis: {
            color: '#fff'
          }
        },
        data: this.hotDatas,
        nameMap
      }
    },
    generateScatter() {
      return {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 3,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4,
          color: '#01ddff'
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            color: 'red',
            formatter: '{b}',
            textStyle: {
              color: '#0f0'
            }
          },
          emphasis: {
            show: true,
            color: '#f60'
          }
        },
        itemStyle: {
          normal: {
            color: 'red'
          }
        },
        symbol: 'circle',
        symbolSize: 10,
        data: [{
          name: '中华人民共和国',
          value: chinaGeoCoordMap['中华人民共和国'].concat([10])
        }]
      }
    },
    getBaseOption() {
      return {
        tooltip: {
          trigger: 'item',
          borderColor: '#666', //区域边框颜色
          formatter: function (params) {
            console.log(params)
            if (params.componentSubType === 'lines') {
              return `${params.data.fromName} -> ${params.data.toName} : ${params.data.value}`
            }
            if (params.name) {
              return (
                  params.name +
                  ' : ' +
                  (params.value instanceof Array ? params.value[2] : isNaN(params.value) ? 0 : parseInt(params.value))
              );
            }
          }
        },
        visualMap: {
          min: 0, //最小值
          max: 1000, //最大值
          // orient: "horizontal", //图例排列方向
          // orient: "vertical", //图例模式
          seriesIndex: 3, // 仅使第 三个series生效(即地图图层生效，不然会导致飞线颜色无法生效)
          left: 26,
          bottom: 20,
          showLabel: true, //显示图例文本
          precision: 0, //数据展示无小数点
          itemWidth: 12, //图例宽度
          itemHeight: 12, //图例高度
          textGap: 10, //图例间距
          inverse: false, //数据反向展示
          hoverLink: true, //鼠标悬浮
          inRange: {
            color: ['rgba(3,4,5,0.4)'],
            symbol: 'rect' //更改图元样式
          },
          pieces: [
            {
              gt: 8,
              label: '发布数量多',
              color: '#da5163'
            },
            {
              gte: 3,
              lte: 8,
              label: '发布数量中等',
              color: '#fdaa34'
            },
            {
              gte: 1,
              lte: 2,
              label: '发布数量少',
              color: '#ffe64e'
            },
            {
              lte: 0,
              label: '未发布',
              color: '#0079c2'
            }
          ],
          textStyle: {
            color: '#fff',
            fontSize: 14, //图元字体大小
            fontWeight: 500
          }
        },
        geo: {
          map: 'world',
          zoom: 1.2,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: true
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              color: 'rgba(51, 69, 89, .5)',
              borderColor: '#516a89',
              borderWidth: 1
            },
            emphasis: {
              color: 'rgba(37, 43, 61, .5)'
            }
          },
          nameMap: nameMap
        },
        series: []
      };
    },
    renderChart() {
      const option = this.getBaseOption()
      option.series.push(this.generateLineSeries())
      option.series.push(this.generateEffectScatterSeries())
      // option.series.push(this.generateLightArea())
      option.series.push(this.generateScatter())

      this.mycontractMap.clear()
      this.mycontractMap.setOption(option);
    },
    updateChart() {
      const option = this.mycontractMap.getOption()
      const newData = this.hotDatas.splice(0, 1)
      if (option.series[0].data.length > 5) {
        option.series[0].data.shift()
      }
      option.series[0].data.push(newData.map(e => {
        return {
          'coords': [
            chinaGeoCoordMap[e.name],
            chinaGeoCoordMap['中华人民共和国']
          ],
          'coord': chinaGeoCoordMap['中华人民共和国'],
          'value': e.value
        }
      })[0])
      if (option.series[1].data.length > 5) {
        option.series[1].data.shift()
      }
      option.series[1].data.push(newData.map(e => {
        return {
          name: e.name,
          value: chinaGeoCoordMap[e.name] ? chinaGeoCoordMap[e.name].concat([e.value]) : []
        }
      })[0])
      // this.mycontractMap.clear()
      this.mycontractMap.setOption(option)
    }
  }
};
</script>

<style lang="less" scoped>
.GlobalMap {
  width: 100%;
  height: 100%;
}
</style>